import 'package:flutter/material.dart';
import 'package:gesture_recognition/gesture_view.dart';
import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';
import 'package:pwd_keeper/common/utils.dart';
import 'package:pwd_keeper/global.dart';
import 'package:pwd_keeper/manager/main_manager.dart';

class GestureRecognitionPage extends StatefulWidget {
  GestureRecognitionPage({Key key}) : super(key: key);

  @override
  _GestureRecognitionPageState createState() => _GestureRecognitionPageState();
}

class _GestureRecognitionPageState extends State<GestureRecognitionPage> {
  List _result = [];
  String _verificationText = '请验证图案密码';
  String _settingText = '请设置图案密码';
  bool _showBackIcon = false;

  @override
  Widget build(BuildContext context) {
    MainManager _mainManager = Provider.of<MainManager>(context);

    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Global.backgroundColor,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 50,
            height: 120,
            child: GridView.builder(
              itemCount: 9,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  decoration: BoxDecoration(
                    color: _result.contains(index)
                        ? Global.fontColor
                        : Global.fontSecondColor.withOpacity(0.3),
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                  ),
                );
              },
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 5,
                mainAxisSpacing: 16,
                crossAxisSpacing: 17,
              ),
            ),
          ),
          Text(
            _mainManager.globalInfo['gesture_pwd'] != ""
                ? _verificationText
                : _settingText,
            style: TextStyle(
              fontSize: 15,
              color: Global.fontColor,
              fontWeight: FontWeight.w400,
            ),
          ),
          SizedBox(height: 50),
          GestureView(
            immediatelyClear: true,
            ringWidth: 2,
            ringRadius: 10,
            circleRadius: 3,
            lineWidth: 2,
            showUnSelectRing: false,
            selectColor: Global.fontColor.withOpacity(0.7),
            unSelectColor: Global.fontColor.withOpacity(0.3),
            size: MediaQuery.of(context).size.width - 70,
            onPanUp: (List<int> items) {
              if (_mainManager.globalInfo['gesture_pwd'] != "") {
                // 有密码
                if (items.join("") ==
                    _mainManager.globalInfo['gesture_pwd'].toString()) {
                  _mainManager.globalPasswordVerification();
                } else {
                  setState(() {
                    _verificationText = '密码错误，请重试';
                  });
                  // Utils.showConfirmDialog(
                  //   context: context,
                  //   content: '密码错误，请重试',
                  // );
                }
              } else {
                if (items.length < 4) {
                  // 初次设置少于四个点
                  setState(() {
                    _settingText = '至少需连接4个点，请重试';
                  });
                  // Utils.showConfirmDialog(
                  //   context: context,
                  //   content: '至少需连接4个点，请重试',
                  // );
                } else {
                  if (_result.length != 0) {
                    // 二次比对密码
                    if (items.join("") == _result.join("")) {
                      Utils.showConfirmDialog(
                        context: context,
                        content: '密码设置成功',
                      );
                      _mainManager.updateGlobalPassword(_result.join(""));
                    } else {
                      setState(() {
                        _settingText = "两次密码不同，请重试";
                      });
                      // Utils.showConfirmDialog(
                      //   context: context,
                      //   content: '两次密码不同，请重试',
                      // );
                    }
                  } else {
                    // 第一次设置成功
                    setState(() {
                      _result = items;
                      _settingText = "请再次绘制图案密码";
                      _showBackIcon = true;
                    });
                  }
                }
              }
            },
            onPanDown: () {},
          ),
          SizedBox(height: 20),
          _showBackIcon
              ? MaterialButton(
                  elevation: 0,
                  minWidth: 100,
                  height: 45,
                  color: Global.fontColor,
                  textColor: Global.backgroundColor,
                  child: new Text('重绘'),
                  onPressed: () {
                    setState(() {
                      _result = [];
                      _settingText = "请设置图案密码";
                      _showBackIcon = false;
                    });
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                )
              : SizedBox(height: 48),
        ],
      ),
    );
  }
}
